<template>
  <div class="counter">
    <search></search>
    <ul class="select">
      <li>
        距离
  
      </li>
      <li>
        <li>
          收藏
  
        </li>
    </ul>
    <scroll-view scroll-y style="height: 200px;" bindscrolltoupper="refresh" bindscrolltolower="loadmore" bindscroll="scrollHindle">
      <ul class="main_container">
        <li class=“flex”>
          <img src="" alt="" />
          <ul style="width:60%;font-size:26rpx;margin-left:5%;">
            <li class="tilte">
              title
            </li>
            <li class="msg">
              123浏览，123收藏
            </li>
            <li class="dis">
              距离我约1324km
            </li>
          </ul>
        </li>
      </ul>
    </scroll-view>
  </div>
</template>

<script>
  // Use Vuex
  import search from '@/components/search'
  import store from './store'
  // import { getCurrentPageUrl } from '@/utils'
  export default {
    computed: {
      count () {
        return store.state.count
      }
    },
    onLoad (e) {
      console.log('load', e)
    },
    components: {
      'search': search
    },
    mounted (e) {
      // console.log(w"??x.getCurrentPages())
      console.log(e)
      // console.log('getCurrentPageUrl', getCurrentPageUrl())
      // console.log('mounted=', e) // {param:1}
    },
    created (e) {
      console.log('created', e)
    },
    methods: {
      scrollHindle (e) {
        console.log('scroll', e)
      },
      getDate () {
  
      },
      loadmore () {
        console.log('loadmore')
      },
      refresh () {
        console.log('refresh')
      },
      increment () {
        store.commit('increment')
      },
      decrement () {
        store.commit('decrement')
      }
    }
  }
</script>

<style>
  .tilte {
    font-size: 40rpx;
  }
  
  .msg {
    margin-top: 30rpx;
    font-size: 24rpx;
    color: red;
  }
  
  .dis {
    margin-top: 10rpx;
    color: #888888;
    font-size: 24rpx;
  }
  
  .flex {
    /* padding:0 6%; */
    margin: 10rpx 6%;
    display: flex;
    justify-content: flex-start;
    box-shadow: 2rpx 2rpx 10rpx #939393;
    /* border:2rpx solid #939393; */
    border-radius: 12rpx;
    box-sizing: border-box;
  }
  
  .flex img {
    border-radius: 12rpx 0 0 12rpx;
    height: 200rpx;
    width: 200rpx;
    display: block;
  }
  
  .select {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    margin-top: 20rpx;
  }
  
  .select li {
    font-size: 32rpx;
    color: #939393;
    height: 45rpx;
    line-break: 45rpx;
  }
  
  .counter-warp {
    text-align: center;
    margin-top: 100px;
  }
  
  .home {
    display: inline-block;
    margin: 100px auto;
    padding: 5px 10px;
    color: blue;
    border: 1px solid blue;
  }
</style>
